<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello OpenCV.js</title>
</head>
<body>
<h2>Hello OpenCV.js</h2>
<p id="status">OpenCV.js is loading...</p>
<div>
  <div class="inputoutput">
    <img id="imagSrc" alt="No Image" />
    <div class="caption">imageSrc <input type="file" id="fileInput1" name="file" /></div>
  </div>
  <div class="inputoutput">
    <canvas id="canvasInput1" ></canvas>
    <div class="caption">canvasInput1</div>
  </div>
  <div class="inputoutput">
    <img id="imagSrc" alt="No Image" />
    <div class="caption">imageSrc <input type="file" id="fileInput2" name="file" /></div>
  </div>
  <div class="inputoutput">
    <canvas id="canvasInput2" ></canvas>
    <div class="caption">canvasInput2</div>
  </div>
  <div class="inputoutput">
    <canvas id="canvasOutput" ></canvas>
    <div class="caption">canvasOutput</div>
  </div>
  <div>
    <input type="button" title="开" value="开" onclick="tianjialogo();" /><br />  
  <div>
</div>
<script type="text/javascript">
let imgElement1 = new Image();
let imgElement2 = new Image();
let inputElement1 = document.getElementById('fileInput1');
let inputElement2 = document.getElementById('fileInput2');
let canvas1 =document.getElementById('canvasInput1');
let canvas2 =document.getElementById('canvasInput2');
let ctx1 = canvas1.getContext('2d');
let ctx2 = canvas2.getContext('2d');
imgElement1.onload = function() {
ctx1.drawImage(imgElement1, 0, 0);
};
imgElement2.onload = function() {
ctx2.drawImage(imgElement2, 0, 0);
};
inputElement1.addEventListener('change', (e) => {
  imgElement1.src = URL.createObjectURL(e.target.files[0]);
}, false);
inputElement2.addEventListener('change', (e) => {
  imgElement2.src = URL.createObjectURL(e.target.files[0]);
}, false);
function tianjialogo(){
let src = cv.imread('canvasInput1');
let logo = cv.imread('canvasInput2');
let dst = new cv.Mat();
let roi = new cv.Mat();
let mask = new cv.Mat();
let maskInv = new cv.Mat();
let imgBg = new cv.Mat();
let imgFg = new cv.Mat();
let sum = new cv.Mat();
let rect = new cv.Rect(0, 0, logo.cols, logo.rows);
roi = src.roi(rect);
// I want to put logo on top-left corner, So I create a ROI
roi = src.roi(rect);

// Create a mask of logo and create its inverse mask also
cv.cvtColor(logo, mask, cv.COLOR_RGBA2GRAY, 0);
cv.threshold(mask, mask, 100, 255, cv.THRESH_BINARY);
cv.bitwise_not(mask, maskInv);

// Black-out the area of logo in ROI
cv.bitwise_and(roi, roi, imgBg, maskInv);

// Take only region of logo from logo image
cv.bitwise_and(logo, logo, imgFg, mask);

// Put logo in ROI and modify the main image
cv.add(imgBg, imgFg, sum);

dst = src.clone();
for (let i = 0; i < logo.rows; i++) {
    for (let j = 0; j < logo.cols; j++) {
        dst.ucharPtr(i, j)[0] = sum.ucharPtr(i, j)[0];
    }
}
cv.imshow('canvasOutput', dst);
src.delete(); dst.delete(); logo.delete(); roi.delete(); mask.delete();
maskInv.delete(); imgBg.delete(); imgFg.delete(); sum.delete();}

function onOpenCvReady() {
  document.getElementById('status').innerHTML = 'OpenCV.js is ready.';
}
</script>
<script async src="/home/db/opencvjs/opencv-3.4.2/build_js/bin/opencv.js" onload="onOpenCvReady();" type="text/javascript"></script>
</body>
</html>
